<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{sys/layout::common('环境变量')}"></head>
<body>
<div class="layui-card">
  <div class="layui-form layui-card-header layuiadmin-card-header-auto">
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">字典值:</label>
        <div class="layui-input-block">
          <input type="text" name="value" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">字典名称:</label>
        <div class="layui-input-block">
          <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">上级字典:</label>
        <div class="layui-input-block layui-select-width">
          <select name="parentId" id="parentId">
            <option value="">--请选择--</option>
            <option th:each="enmu : ${parentList}" th:value="${enmu.value}" th:text="${enmu.name}"></option>
          </select>
        </div>
      </div>
      <div class="layui-inline">
        <button class="layui-btn layui-btn-primary layui-btn-sm" lay-submit lay-filter="searchDict">
          <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
        </button>
        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="addBtn">新增</button>
      </div>
    </div>
  </div>

  <div class="layui-card-body">
    <table id="dictTable" lay-filter="tableFilter"></table>
  </div>
</div>
<script type="text/html" id="topToolbar">
  <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="addEvent">
    <i class="layui-icon layui-icon-add-1"></i>&nbsp新增
  </button>
  <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemoveEvent">
    <i class="layui-icon layui-icon-delete"></i>&nbsp删除
  </button>
</script>
<script type="text/javascript" th:inline="javascript">
  const basePath = [[${#httpServletRequest.getContextPath()}]] + '/variable';
</script>
<script type="text/javascript">
  layui.use(['form', 'table', 'common'], function () {
    const form = layui.form
      , table = layui.table
      , common = layui.common
    table.render({
      elem: '#dictTable',
      method: 'post',
      url: basePath + '/list',
      toolbar: '#topToolbar',
      cols: [ [
        {type: 'checkbox'},
        {field: 'serialNumber', align: 'center', title: '序号', type: 'numbers'},
        {field: 'parentName', align: 'center', title: '上级字典', sort: true},
        {field: 'name', title: '字典名称', align: 'center', sort: true},
        {field: 'value', align: 'center', title: '字典值', sort: true},
        {field: 'orders', align: 'center', title: '排序号', sort: true},
        {field: 'description', align: 'center', title: '描述', sort: true}
      ] ],
      page: true,
      id: 'dictTable',
      done: function (res, curr, count) {
        // 结果表格数据的自定义样式设置
        // setTableStyle(res);
      }
    });
    //表格顶部工具栏
    table.on('toolbar(tableFilter)', function (obj) {
      const checkIds = common.checkField(obj, 'id');
      if (['batchRemoveEvent'].includes(obj.event)) {
        if (checkIds === "") {
          layer.msg("未选中数据", {
            icon: 3,
            time: 1000
          });
          return false;
        }
      }
      if (obj.event === 'addEvent') {
        layer.open({
          type: 2,
          title: '新增',
          shade: 0.1,
          area: [common.isModile() ? '100%' : '500px', common.isModile() ? '100%' : '400px'],
          content: basePath + '/add'
        });
      } else if (obj.event === 'editEvent') {
        layer.open({
          type: 2,
          title: '修改',
          shade: 0.1,
          area: ['500px', '400px'],
          content: basePath + '/edit/' + checkIds
        });
      } else if (obj.event === 'refreshEvent') {
        table.reload('theTable');
      } else if (obj.event === 'batchRemoveEvent') {
        window.batchRemove(obj, checkIds);
      }
    });
    //监听搜索
    form.on('submit(searchDict)', function (data) {
      const field = data.field;
      //执行重载
      table.reload('dictTable', {
        method: 'post',
        where: field
      });
    });
    // $("#addBtn").click(function () {
    //   top.layui.index.openTabsPage(contextPath + "/dictionary/add", "数据字典新增");
    // })
  })
</script>
</body>
</html>
